<!--
=========================================================
* Argon Dashboard - v1.2.0
=========================================================
* Product Page: https://www.creative-tim.com/product/argon-dashboard


* Copyright  Creative Tim (http://www.creative-tim.com)
* Coded by www.creative-tim.com



=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:replace="fragments/common :: head_and_imports"></head>

<body>
<!-- Sidenav -->
<nav th:replace="fragments/common :: sidnav(4)"></nav>

<!-- Main content -->
<div class="main-content" id="panel">
	<!-- Topnav -->
	<nav class="navbar navbar-top navbar-expand navbar-dark bg-primary border-bottom d-md-none">
		<div class="container-fluid">
			<div class="collapse navbar-collapse row justify-content-between" id="navbarSupportedContent">
				<div class="row col-auto justify-content-end align-items-center m-0">
					<div class="col-auto">
						<ul class="navbar-nav align-items-center">
							<li class="nav-item d-xl-none">
								<!-- Sidenav toggler -->
								<div class="pr-2 sidenav-toggler sidenav-toggler-dark" data-action="sidenav-pin"
								     data-target="#sidenav-main">
									<div class="sidenav-toggler-inner">
										<i class="sidenav-toggler-line"></i>
										<i class="sidenav-toggler-line"></i>
										<i class="sidenav-toggler-line"></i>
									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
				<!-- Header -->
				
			</div>
		</div>
	</nav>
	
	<!-- Header -->
	<div class="header bg-primary">
		<div class="container-fluid">
			<!-- Header container -->
			<div class="container-fluid d-flex align-items-center">
				<div class="row">
					<div class="col-lg-10 col-md-10 mt-5 mb-8">
						<h1 class="display-2 text-white">Inheritance</h1>
						<p class="text-white text-justify mb-3">
							There are two metrics relevant to inheritance include:
						</p>
						<p class="text-justify text-white mb-1 ml-4">
							<span class="text-bold">Depth of Inheritance Tree</span><span>, </span>
							which is the maximum number of classes that a path goes through from a specific class to the root
							class in the inheritance tree. Recall that every java class extends from the Object class,
							therefore the minimum value is 1.
						</p>
						<p class="text-white text-justify mb-3 ml-4">
							Detailed descriptions and influences:
							<a class="text-yellow text-link"
							   href="https://maisqual.squoring.com/wiki/index.php/Depth_in_Inheritance_Tree">
								Maisqual - Depth in Inheritance Tree</a>,
							<a class="text-yellow text-link" href="http://www.arisa.se/compendium/node101.html">
								ARiSA - Depth of Inheritance Tree</a>.
						</p>
						<p class="text-justify text-white mb-1 ml-4">
							<span class="text-bold">Number Of Children</span><span>, </span>
							which is counting the number of the immediate subclasses of a class.
						</p>
						<p class="text-white text-justify mb-3 ml-4">
							Detailed descriptions and influences:
							<a class="text-yellow text-link"
							   href="https://maisqual.squoring.com/wiki/index.php/Number_of_Children">
								Maisqual -  Number Of Children</a>,
							<a class="text-yellow text-link" href="http://www.arisa.se/compendium/node102.html">
								ARiSA - Number Of Children</a>.
						</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<!-- Page content -->
	<div class="container-fluid mt--6" th:with="currentProjectInfo = ${projectList.get(projectList.size()-1)}">
		<!--图表-->
		<div class="row">
			<!-- chart -->
			<div class="col-xl-12">
				<div class="card">
					<div class="card-header bg-transparent">
						<div class="row align-items-center">
							<div class="col">
								<h6 class="text-muted text-uppercase ls-1 mb-1">Overview</h6>
								<h5 class="h3 mb-0">
									The trends of the Deep of Inheritance Tree and the Number of Children for all classes.
								</h5>
							</div>
						</div>
					</div>
					
					<div id="chart" class="card-body pb-4 px-4 pt-0 col-12" style="height:680px;"></div>
					<div class="modal fade" id="chart_data_model" tabindex="-1" role="dialog"
					     aria-labelledby="row_model_label" aria-hidden="true">
						<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
							<div class="modal-content">
								<div class="modal-header">
									<h5 class="modal-title">{{title}}</h5>
									<button type="button" class="close" data-dismiss="modal" aria-label="Close">
										<span aria-hidden="true">&times;</span>
									</button>
								</div>
								<div class="modal-body pt-0">
									<hr class="my-3">
									<div v-for="pointValue in pointValueList">
										<span>{{pointValue}}</span><br>
									</div>
									<hr class="my-3">
									<div v-for="pointDescription in pointDescriptionList">
										<div v-html="pointDescription"></div>
										<hr class="my-1">
									</div>
								</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
								</div>
							</div>
						</div>
					</div>
					
					<script type="text/javascript" th:inline="javascript">
              let timeRecords = /*[[${timeRecords}]]*/;
              let deepOfInheritanceTreeDataset = /*[[${deepOfInheritanceTreeDataset}]]*/;
              let numberOfChildrenDataset = /*[[${numberOfChildrenDataset}]]*/;

              function showTimelineChartForClass() {
                  let option = {
                      legend: {},
                      grid: {bottom: 90},
                      xAxis: {
                          type: 'category',
                          splitLine: {show: true, lineStyle: {type: 'solid'}},
                          splitArea: {interval: 0,},
                          axisLabel: {
                              formatter: function (value, index) {
                                  return value.split(" ")[0];
                              }
                          }
                      },
                      yAxis: [{
                          name: "Deep of Inheritance Tree", type: 'value', nameLocation: 'center',
                          nameRotate: 90, nameGap: 30, min: 1,
                      }, {
                          name: "Number of Children", type: 'value', nameLocation: 'center',
                          nameRotate: 90, nameGap: 30
                      }],
                      series: [{
                          name: 'Classes regarding the Deep of Inheritance Tree', type: 'scatter', yAxisIndex: 0,
                          data: deepOfInheritanceTreeDataset, symbolOffset: [-10, 0],
                          emphasis: {
                              label: {
                                  show: true, color: '#000000', position: 'top', fontWeight: 'normal',
                                  formatter: function (params) {
                                      return params.data[2];
                                  },
                              },
                          },
                      }, {
                          name: 'Class regarding the Number of Children', type: 'scatter', yAxisIndex: 1,
                          data: numberOfChildrenDataset, symbolOffset: [10, 0],
                          emphasis: {
                              label: {
                                  show: true, color: '#000000', position: 'top', fontWeight: 'normal',
                                  formatter: function (params) {
                                      return params.data[2];
                                  },
                              },
                          },
                      }],
                      dataZoom: [
                          {type: 'slider', xAxisIndex: 0, start: 0, end: 100},
                          {type: 'inside', xAxisIndex: 0, start: 0, end: 100},
                          {type: 'slider', yAxisIndex: 0, left: 20, start: 0, end: 100},
                          {type: 'slider', yAxisIndex: 1, right: 20, start: 0, end: 100},
                      ],
                      tooltip: {
                          padding: 10, borderWidth: 1,
                          show: true, enterable: true, trigger: 'item', confine: true,
                          formatter: function (params) {
                              let value = params.data
                              return '<div style="border-bottom: 1px solid rgba(255,255,255,.3) ;padding-bottom: 7px;margin-bottom: 7px">'
                                  + 'Class: ' + value[2] + '<br>' + 'of Module: ' + value[3] + '<br>'
                                  + params.seriesName + ": " + value[1] + '<br>'
                                  + '</div>'
                                  + 'Click the point to see all overlapped data.';
                          }
                      },
                  };
                  document.getElementById("chart").style.height = "550px";
                  timelineChart.clear();
                  timelineChart.resize();
                  timelineChart.setOption(option);
              }

              // 基于准备好的dom，初始化echarts实例
              let timelineChart = echarts.init(document.getElementById('chart'));

              // 用于显示timeline chart的多行数据
              let chart_data_vm = new Vue({
                  el: '#chart_data_model',
                  data: {
                      title: '',
                      pointValueList: [],
                      pointDescriptionList: [],
                  }
              })
              timelineChart.on('click', function (param) {
                  chart_data_vm.title = param.value[0];

                  let pointValueList = [];
                  pointValueList.push(param.seriesName + ": " + param.value[1]);
                  chart_data_vm.pointValueList = pointValueList;

                  let targetDataset;
                  if (param.seriesName === "Number of Children") {
                      targetDataset = numberOfChildrenDataset;
                  } else {
                      targetDataset = deepOfInheritanceTreeDataset;
                  }
                  let x = param.value[0];
                  let y = param.value[1];
                  let pointDescriptionList = [];
                  targetDataset.forEach(row => {
                      if (row[0] === x && row[1] === y) {
                          let text = '<span style="font: 12px">'
                              + 'Package: ' + row[2] + '</span>' + '<br>'
                              + '<span style="font: 12px">'
                              + 'Of module: ' + row[3] + '</span>' + '<br>';
                          pointDescriptionList.push(text);
                      }
                  });
                  chart_data_vm.pointDescriptionList = pointDescriptionList;
                  $('#chart_data_model').modal('show');
              });
					
					</script>
				
				</div>
			</div>
		</div>
		<!--表格-->
		<div class="row">
			<!-- 选择记录时间 -->
			<div class="col-xl-12">
				<div class="card-header border-0">
					<div class="row align-items-center">
						<div class="col-auto">
							<h6 class="text-uppercase text-muted ls-1 mb0">Details</h6>
							
							<!-- dropdown -->
							<div class="nav-item dropdown">
								<a class="nav-link pr-0" href="#" role="button" data-toggle="dropdown" aria-haspopup="true"
								   aria-expanded="false">
											<span class="h3 mb-0 mr-2" id="current_record_time"
											      th:text="${#dates.format(currentProjectInfo.getCreateDate(), 'yyyy-MM-dd HH:mm:ss')}"></span>
									<i class="fas fa-caret-down"></i>
								</a>
								<div class="dropdown-menu">
									<a th:class="${timeRecordStat.index} eq ${timeRecords.size()-1} ? 'dropdown-item active' : 'dropdown-item'"
									   href="javascript:void(0);"
									   th:each="timeRecord,timeRecordStat : ${timeRecords}"
									   th:onclick="selectRecordTime(this,[[${timeRecordStat.index}]])">
										<span th:text="${timeRecord}"></span>
									</a>
								</div>
							</div>
						
						</div>
					
					</div>
				</div>
			</div>
			<!--表格-->
			<div class="col-xl-12">
				<div class="card table-outline">
					<div class="table-responsive">
						<div id="toolbar">
							<div class="form-inline" role="form">
								<a id="previous-btn" class="btn btn-outline-primary btn-sm invisible"
								   href="javascript:void(0);"
								   onclick="showClassInheritance()">
									< previous</a>
							</div>
						</div>
						<table id="table"></table>
					</div>
				</div>
			</div>
			<!-- Modal -->
			<div class="modal fade" id="row_model" tabindex="-1" role="dialog"
			     aria-labelledby="row_model_label" aria-hidden="true">
				<div class="modal-dialog modal-dialog-centered modal-xl" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<h5 class="modal-title" id="row_model_label">
								<span class="h3 text-uppercase text-muted mr-2">{{ recordType }}</span>
								<span class="h3">{{ recordName }}</span>
							</h5>
							<button type="button" class="close" data-dismiss="modal" aria-label="Close">
								<span aria-hidden="true">&times;</span>
							</button>
						</div>
						<div class="modal-body">
							<div id="row_chart" class="card-body pb-4 pr-4 pl-0 pt-0 col-12" style="height:450px;"></div>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
						</div>
					</div>
				</div>
			</div>
		
		</div>
		<!--common modals-->
		<modal th:replace="fragments/common :: modals"></modal>
		<!-- Footer -->
		<footer th:replace="fragments/common :: footer"></footer>
	</div>
</div>
<script th:replace="fragments/common :: footer_imports"></script>
<script>
    $(function () {
        // 首次渲染图表
        showTimelineChartForClass();
        // 首次渲染表格
        showClassInheritance();
    })

    let $table = $('#table')
    let projectRecordIndex = -1;

    // 选择记录
    function selectRecordTime(obj, index) {
        projectRecordIndex = index;
        let newTime = $(obj).text()
        $('#current_record_time').text(newTime)
        $(obj).siblings().removeClass("active")
        $(obj).addClass("active");
        showClassInheritance();
    }

    //表格：类级别的度量数据
    function showClassInheritance() {
        let columns = [{
            field: 'chart', title: ''
        }, {
            field: 'name', title: 'Class Name', sortable: true
        }, {
            field: 'deepOfInheritanceTree', title: 'Deep of Inheritance Tree', sortable: true
        }, {
            field: 'numberOfChildren', title: 'Number of Children', sortable: true
        }, {
            field: 'type', title: 'Class Type', sortable: true
        }, {
            field: 'declaration', title: 'Class Location', sortable: true
        }, {
            field: 'package', title: 'of Which Package', sortable: true
        }, {
            field: 'module', title: 'of Which Module', sortable: true
        }];
        $.get("/dashboard/inheritance/table/class?projectRecordIndex=" + projectRecordIndex).done(function (data) {
            let dataset = data;
            //给每行前面加上趋势图按钮（弹出模态框）
            for (i = 0; i < dataset.length; i++) {
                dataset[i].chart =
                    '<a class="table-chart-icon" href="javascript:void(0);" data-toggle="modal" '
                    + 'data-target="#row_model" onclick="showTableChartForClass(\'' +
                    dataset[i].qualifiedName + '\')">'
                    + '<i class="fas fa-chart-bar"></i></a>'
            }
            buildTable($table, dataset, columns, 2, 0)
            $("#previous-btn").addClass("invisible");
        });
    }

    // 重新渲染表格
    function buildTable($el, dataset, columns, fixedNumber, fixedRightNumber) {
        $el.bootstrapTable('destroy').bootstrapTable({
            height: 500,
            columns: columns,
            data: dataset,
            toolbar: '#toolbar',
            search: true,
            showColumns: true,
            fixedColumns: true,
            fixedNumber: fixedNumber,
            fixedRightNumber: fixedRightNumber,
            // buttons: "",
            // buttonsPrefix: "",
            // buttonsClass: "btn btn-sm btn-outline-primary",
            showColumnsToggleAll: true,
            detailViewByClick: true,
            iconSize: "sm",
            showFullscreen: true,
        })
    }

    // 用于修改模块框title
    let inheritance_table_chart_title_vm = new Vue({
        el: '#row_model_label',
        data: {
            recordType: '',
            recordName: '',
        }
    })

    // 指定图表的配置项和数据
    let tableChartOptForClass = {
        grid: {
            bottom: '100'
        },
        // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
        xAxis: {
            type: 'category'
        },
        yAxis: {},
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                snap: true,
                type: "line",
            }
        },
        dataZoom: [
            {
                type: 'slider',
                xAxisIndex: 0,
                start: 0,
                end: 100
            },
            {
                type: 'inside',
                xAxisIndex: 0,
                start: 0,
                end: 100
            },
            {
                type: 'slider',
                yAxisIndex: 0,
                start: 0,
                end: 100
            }
        ],
    };
    let inheritanceTableChart = echarts.init(document.getElementById('row_chart'));


    function showTableChartForClass(qualifiedName) {
        inheritance_table_chart_title_vm.recordName = qualifiedName;
        inheritance_table_chart_title_vm.recordType = "Class";
        // 异步加载数据
        inheritanceTableChart.clear();
        inheritanceTableChart.setOption(tableChartOptForClass);
        $.get("/dashboard/inheritance/table/chart/class?qualifiedName=" + qualifiedName).done(function (data) {
            // 填入数据
            inheritanceTableChart.setOption({
                legend: {
                    data: ["Deep of Inheritance Tree", "Number of Children"]
                },
                dataset: {
                    // 提供一份数据。
                    source: data
                },
                series: [
                    {
                        type: 'line',
                        name: 'Deep of Inheritance Tree',
                        lineStyle: {width: 3},
                        emphasis: {label: {show: true}}
                    },
                    {type: 'line', name: 'Number of Children', lineStyle: {width: 3}, emphasis: {label: {show: true}}},
                ],
            });
        });
    }

    // 让echarts在模态框打开后重新渲染
    $('#row_model').on('shown.bs.modal', function () {
        inheritanceTableChart.resize()
    })


</script>

</body>

</html>
